<template>
  <div style="overflow: hidden" @scroll="handleScroll">
    <SearchScreenNav @shuaixuan="cateShuaiXuan"></SearchScreenNav>

    <div v-if="isRecommendBrand === '1'">
      <div class="top-img"></div>
      <span class="introduce"
        ><i style="color: red">1111:</i
        >12356556456hiafdshfkladhksflaifklasfgnaghioasgkadgnadkghaioga</span
      >
      <!-- 横线 -->
      <van-divider style="margin: 8px 16px" />
    </div>

    <!-- 综合-时间-价格-分类 -->
    <van-sticky :offset-top="44">
      <!-- //tabs标签 -->
      <div>
        <van-tabs v-model:active="tabActive" animated @click-tab="onClickTab">
          <van-tab v-for="(item, i) in tabsList" :title="item">
            <template #title>
              <div style="font-size: 12px">
                {{ item
                }}<van-icon
                  v-if="i != 0"
                  name="https://cdn-gdcws-imgs.gdcws.cn/zhunong/20240124/jkuohao.png"
                />
              </div>
            </template>
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>

    <!-- van-pull-refresh + van-list 上下拉刷新 -->
    <keep-alive>
      <div v-if="isRecommendBrand === '1'">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- collection商品列表 -->
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
              "
            >
              <DetailsItem
                v-for="(item, index) in list"
                @collect="xinAction"
                @cellclick="cellClick(index)"
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
      <div v-else>
        <van-pull-refresh
          style="margin-top: 2.75rem"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- collection商品列表 -->
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
              "
            >
              <!-- <DetailsItem v-for="item in list" @collect="xinAction" /> -->
              <DetailsItem
                v-for="(item, index) in list"
                @collect="xinAction"
                @cellclick="cellClick"
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </keep-alive>

    <!-- 底部弹出 -->
    <van-popup v-model:show="showBottom" position="bottom">
      <div>
        <i
          style="
            display: inline-block;
            margin-left: 1.25rem;
            margin-top: 1.25rem;
          "
          >尺寸</i
        >
      </div>

      <!-- 自定义collection -->
      <div style="margin: 1.25rem">
        <div class="collection">
          <div
            class="coll-item"
            v-for="(item, index) in gridItemList"
            :key="item.id"
            :style="{
              background: activeButtonIndex === index ? 'black' : '#f7f7f7',
            }"
            @click="itemClick(index)"
          >
            <i
              :style="{ color: activeButtonIndex === index ? '#fff' : 'black' }"
              >{{ item.title }}</i
            >
          </div>
        </div>
      </div>

      <!-- // 加减数量 -->
      <div style="display: flex; justify-content: center">
        <van-stepper
          v-model="stepperValue"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>

      <br />
      <!-- 横线 -->
      <van-divider />

      <div class="bottom-view">
        <i>￥855288</i>
        <van-button
          type="default"
          style="
            border: none;
            background-color: #000;
            margin: 1rem;
            width: 90%;
            color: #fff;
          "
          @click="finishClick"
          >完成</van-button
        >
      </div>
    </van-popup>

    <!-- 抽屉 -->
    <DrawerView
      style="position: absolute"
      :show="showRight"
      @clickoverlay="onClickOverlay"
      v-show="showRight"
    ></DrawerView>
  </div>
</template>

<script setup>
import { showToast } from "vant";
import SearchScreenNav from "@/views/category/components/SearchScreenNav.vue";
import DrawerView from "@/views/category/components/DrawerView.vue";
import DetailsItem from "@/views/category/components/DetailsItem.vue";
import { onMounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";

// 路由页面之间的传值，接收
const route = useRoute();
const router = useRouter();
// 是否为推荐品牌界面
const isRecommendBrand = route.query.isRecommendBrand;

const showRight = ref(false);
// 帅选 子组件向父组件传值
// 帅选
const cateShuaiXuan = (data) => {
  console.log("帅选----");
  showRight.value = true;
};
// 点击蒙层
const onClickOverlay = () => {
  showRight.value = false;
};

// tabs数组
const tabsList = ["综合", "时间", "价格", "分类"];
//选中的tabs
const tabActive = ref(0);
// tab控件点击事件
const onClickTab = (obj) => {
  console.log(obj);
  showToast(obj.title);
};

// 下拉刷新
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

// collection 数组
const gridItemList = ref([
  {
    id: "1",
    title: "55",
    select: true,
  },
  {
    id: "2",
    title: "666",
    select: false,
  },
  {
    id: "3",
    title: "88",
    select: true,
  },
  {
    id: "4",
    title: "99",
    select: false,
  },
]);
// 收藏(心形)
const xinAction = () => {
  console.log("收藏被点击了");
  showBottom.value = true;
};

// 商品被点击了
const cellClick = (data) => {
  console.log(data);
  router.push({
    path: "/category/goodsdetails",
  });
};

// 是否呼出底部弹窗
const showBottom = ref(false);
// 加减数量
const stepperValue = ref(2);
// 尺寸默认选中
const activeButtonIndex = ref(0);
const itemClick = (index) => {
  activeButtonIndex.value = index;
};
// 完成
const finishClick = () => {};

// mounted相当于viewWillAppear
onMounted(() => {
  onRefresh();
});

// 路由更新时触发
onBeforeRouteUpdate((to, from, next) => {
  console.log("to:", to);
  next();
});
</script>

<style lang="scss" scoped>
.top-img {
  margin-top: 2.75rem;
  left: 0;
  width: 100%;
  height: 9.375rem;
  background: url("https://cdn-gdcws-imgs.gdcws.cn/zhunong/20240123/rivate_img.png")
    no-repeat;
  background-size: 100% 100%;
}

.introduce {
  display: block;
  margin-top: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  word-wrap: break-word; /* 当单词太长时自动换行 */
}

// 弹窗样式
.collection {
  margin: 1rem;
  display: flex;
  flex-flow: row wrap; //主轴方向和换行属性复合写法:
  justify-content: space-between;
  text-align: center;
  align-items: center;

  .coll-item {
    margin: 0.5rem;
    width: 20%;
    height: 30px;
    background-color: #f7f7f7;

    i {
      line-height: 30px;
    }
  }
}

::v-deep(.van-grid-item__content) {
  // 其中 !import 具有优先权 ,提升指定样式规则的应用优先权。
  //   background-color: #f2f2f2 !important;
  background-color: #eae8e8f0;
  color: #333;
  padding: 0.5rem 0.3125rem;
}

::v-deep(.van-stepper--round .van-stepper__minus) {
  color: black;
  border: 1px solid black;
}

.bottom-view {
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;

  i {
    display: block;
    color: var(--cp-primary);
  }
}
</style>
